<template>
  <transition name="slide">
    <div class="blank-page page-container--child container-flex">
      <div class="logo"></div>
      <div>欢迎使用房大虾！</div>
      <div>{{testValue}}</div>
      <mt-button
        type="primary"
        @click.native="addTestValue"
      >增加值</mt-button>
      <mt-button
        type="primary"
        @click.native="showTestValue"
      >测试值</mt-button>
      <router-view></router-view>
    </div>
  </transition>
</template>

<script>
// eslint-disable-next-line no-extend-native
export default {
  data() {
    return {}
  },
  computed: { ...mapGetters(['testValue']) },
  mounted() {
    console.log(`route:${this.routeName}`)
  },
  methods: {
    addTestValue() {
      // Toast('hello!')
      // Msg('hello!')
      this.updateTestValue(this.testValue + 1)
    },
    showTestValue() {
      this.$router.show({
        name: 'test1'
      })
    },
    ...mapActions(['updateTestValue'])
  }
}
</script>

<style scoped lang="scss">
.blank-page {
  padding-top: 20%;

  .logo {
    width: 100%;
    height: 140px;
    background-image: url("../assets/image/logo.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
}
</style>
